<template>
  <div>
    <div class="banner-context">
      <div style="height: 315px" class="category">
        <div v-for="item in categorys" :key="item.id" class="cate-item">
          <router-link :to="{path: '/Products', query: { cid: item.id }}">{{item.name}}</router-link>
        </div>
      </div>
      <div class="banner">
        <el-carousel height="315px">
          <el-carousel-item v-for="(item, index) in banners" :key="index" :label="index + 1">
            <img :src="item">
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div v-if="product.id !== ''" class="category-list">
      <category title="F1 手机数码" :img-src="getImgSrc(17)" color="#d58717"></category>
      <category title="F2 图书文学" :img-src="getImgSrc(18)" color="red"></category>
      <category title="F3 服装箱包" :img-src="getImgSrc(20)" color="#3b838c"></category>
      <category title="F4 食品生鲜" :img-src="getImgSrc(19)" color="#004cff"></category>
      <category title="F5 酒水饮料" :img-src="product" color="#f100ff"></category>
    </div>
  </div>
</template>

<script>
import category from "../components/category";

export default {
  name: "Index",
  data() {
    return {
      banners: [
        "http://img60.ddimg.cn/upload_img/00570/tongshu/750x315_djj_0823-1535089129.jpg",
        "http://img60.ddimg.cn/upload_img/00709/wangsiyu/shlz750315FHC-0824-1535351985.jpg",
        "http://img62.ddimg.cn/ddreader/dangebook/8ym40j20y750-315.jpg",
        "http://img60.ddimg.cn/upload_img/00087/geq/750x315_0824-1535339989.jpg",
        "http://img62.ddimg.cn/upload_img/00751/1/750x315_dl_0816-1535537441.jpg"
      ],
      product: {
        id: "",
        name: "",
        stock: "",
        cid: "",
        pdesc: "",
        img: null,
        category: {
          name: ""
        }
      },
      categorys: [],
      fullscreenLoading: true
    };
  },
  created() {
    this.getCategorys();
    this.getProduct();
  },
  methods: {
    getProduct() {
      this.fullscreenLoading = true;
      this.$myPost(this, "/product//public/queryAll", (res) => {
        this.fullscreenLoading = true;
        this.product = res.data.data;
      });
    },
    getImgSrc(category) {
      return this.product.filter(v => {
        return v.cid === category;
      });
    },
    getCategorys() {
      this.axios.get("/category/public/categorys").then(res => {
        this.categorys = res.data.data;
      });
    },
    search(cid) {
      this.$router.push({ path: "Products", query: { cid: cid } });
      return false;
    }
  },
  components: {
    category: category
  }
};
</script>

<style scoped>
</style>